<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../style/css/index.css">
    <link rel="stylesheet" href="../style/css/tc.css">
    <script src="../style/vue/vue.global.js"></script>
    <script src="../style/vue/axios.min.js"></script>
    <script src="../style/vue/md5.min.js"></script>
    <title>历史收集列表 | TOP图片收集管理系统</title>

    <style>
         #listli{
             white-space: nowrap;
             width: 95%;
             margin: 20px auto;
             border:1px solid #888;
             background-color: rgba(255,255,255,0.55);
             box-shadow: 5px 5px 8px rgb(120 120 120 / 50%);
             backdrop-filter: blur(2px);
             border-radius: 10px;
         }
         #listli  ul{
             padding: 20px 8px;
             /*display:flex;*/
             color: #000;
         }
         #listli #title{
             color: #000;
             max-width: 100%;
             min-width: 50%;
             text-align: left;
             font-size: 21px;
             white-space: nowrap;
             overflow: hidden;
         }
         #listli div{
             margin: 5px 5px;
             display: flex;
         }
         #listli li{
             margin: 0 10px;
             font-size: 14px;
             color: #444;
         }
    </style>
</head>
<body>
    <div id="app">
        <div id="top">
            <div id="title">
                <h1 id="titles">{{ title }}</h1>
            </div>
            <div id="list">
                <div id="list_tb">
                    <img src="../style/image/gd.png" alt="下拉列表">
                </div>
                <div class="list">
                    <ul>
                        <li id="list_li"><a href="new.php" target="_blank">新建收集表</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div id="msg">
           <div id="listfns" v-html="lists">  <!-- v-html="lists" -->
                <div id="listli">
                    <a href="../index.php?fid=fid" target="_blank">
                    <ul>
                        <li id="title">123</li>
                        <li id="username">456</li>
                        <li id="class">789</li>
                        <li id="pax">101</li>
                        <li id="stoptime">102</li>
                    </ul>
                    </a>
                </div>
            </div>
        </div>
        
        <div id="bottom">
            Opyright © 2024 TOP图片收集管理系统 All Rights Reservedby.
        </div>
    </div>
</body>
<script>
    const App = {
        data() {
            return {
                title:'历史收集列表',username:'',password:'',qqnum:'',lists:[]
            }
        }, methods: {
            axio:function(md5key){
                //请求服务器，收集表的信息
                var that = this;
                axios
                    .post("../api/upadmin.php",{fun:"lists",ver:md5key})
                    .then(function(resp) {
                        var data = resp.data;
                        if(data.stat == '200'){
                            //输出列表
                            console.log(data);
                            let list  = '';
                            //let list = '<div id="listli">';
                            for(i in data.title){
                                list = list + '<div id="listli"><a href="../index.php?fid='+data.fid[i]+'" target="_blank"><ul><li  id="title">'+data.title[i]+'</li><div><li id="username">创建者:'+data.username[i]+'</li><li id="class">'+data.class[i]+'</li></div><div><li id="pax">已收集:'+data.pax[i]+'</li><li id="stoptime">'+data.stoptime[i]+'</li></div></ul></a></div>';
                            }
                            //list = list+'</div>';
                            that.lists = list;
                        }else if(data.stat == '400'){
                            alert(data.msg);
                        }else{
                            alert('查询数据时，发生未知错误！\n\n错误代码：'+data);
                        }
                    }).catch(function(err){
                        console.log(err);
                    });
                
            },
            md5:function(mima){
                if(mima==null || mima==''){var mima = new Date().getTime();}
                var md5mima = '00000000000000000000000000011000011010100000';
                var md5key = '00000000000000000000101111000110000101001110';
                var md5mima=parseInt(md5mima,2);
                var md5key=parseInt(md5key,2);
                var ver = md5(parseInt(mima/md5mima)+md5key);
            }
            
        },mounted:function(){
            this.axio(this.md5());
            
        },created(){     
        }
    }

    Vue.createApp(App).mount('#app')

</script>
</html>